<template>
  <div class="y-conter">
    <div class="y-title">
      <span class="y-font-1">项目信息(工地建设示例项目)</span>
    </div>
    <div class="y-nrong">
      <div class="y-btn">
        <el-button class="y-but" type="primary" @click="xiangmuEdit()"
          >编辑项目信息</el-button
        >
        <el-dialog
          title="编辑项目信息"
          :visible.sync="dialogFormVisible"
          width="60%"
        >
          <div class="y-form">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              ref="Form"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="项目名称:">
                    <el-input
                      v-model="formInline.buildinfo_name"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="项目简称:">
                    <el-input
                      v-model="formInline.buildinfo_shortname"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="施工许可证:">
                    <el-input
                      v-model="formInline.buildinfo_licence"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="项目地址:">
                    <el-input
                      v-model="formInline.buildinfo_addr"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="建设面积:">
                    <el-input
                      v-model="formInline.buildinfo_area"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="市合同备案编号:">
                    <el-input
                      v-model="formInline.buildinfo_code"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="合同金额:">
                    <el-input
                      v-model="formInline.buildinfo_money"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="预付款金额:">
                    <el-input
                      v-model="formInline.buildinfo_advance"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="清单人工费:">
                    <el-input
                      v-model="formInline.buildinfo_cost"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="建设单位:">
                    <el-input
                      v-model="formInline.buildinfo_company"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="总承包单位:">
                    <el-input
                      v-model="formInline.buildinfo_contractor"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="监理单位:">
                    <el-input
                      v-model="formInline.buildinfo_supervisor"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="设计单位:">
                    <el-input
                      v-model="formInline.buildinfo_design"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="项目性质房产:">
                    <el-input
                      v-model="formInline.buildinfo_property"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="所属住建局；">
                    <el-input
                      v-model="formInline.buildinfo_organ"
                      placeholder="请输入"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="项目状态；">
                    <el-input
                      v-model="formInline.buildinfo_status"
                      placeholder="请输入"
                      class="padding"
                    >
                    
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="开工日期:">
                    <el-date-picker
                      v-model="formInline.buildinfo_start"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy - MM - dd -"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                    <!-- <el-input v-model="formInline.buildinfo_start" placeholder="请输入"></el-input> -->
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="计划竣工日期:">
                    <el-date-picker
                      v-model="formInline.buildinfo_planend"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy - MM - dd -"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="实际竣工日期:">
                    <el-date-picker
                      v-model="formInline.buildinfo_realend"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy - MM - dd -"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="BjQx(formInline)">取 消</el-button>
            <el-button type="primary" @click="BjQd('Form')">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <el-row type="flex" class="row-bg">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="p-all">
              <span class="two1-zi">项目名称&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp; {{ this.shuju.buildinfo_name }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">项目简称&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_shortname }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">施工许可证&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_licence }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">项目地址&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_addr }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">建设单位&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_company }}</span
              >
            </p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <p class="p-all">
              <span class="two1-zi">建设面积&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_area }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">市合同备案编号&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_code }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">合同金额&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_money }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">预付款金额&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_advance }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">清单人工费&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_cost }}</span
              >
            </p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="p-all">
              <span class="two1-zi">总承包单位&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_contractor }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">监理单位&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_supervisor }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">设计单位&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_design }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">开工日期&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_start }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">计划竣工日期&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_planend }}</span
              >
            </p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="p-all">
              <span class="two1-zi">实际竣工日期&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_realend }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">项目性质房产&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_property }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">所属住建局&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;{{ this.shuju.buildinfo_organ }}</span
              >
            </p>
            <p class="p-all">
              <span class="two1-zi">项目状态&nbsp;:</span>
              <span class="two1-zi1"
                >&nbsp;
              
                <span v-if="shuju.buildinfo_status ==0">进行中</span>
                  <span v-if="shuju.buildinfo_status ==1">待进行</span>
               
              </span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 第一个表格 -->

    <!-- 第二个表格 -->
    <div class="y-table-conter">
      <div class="y-bt">
        <span>材料管理</span>
        <el-button type="primary" class="tjia" @click="addCaiLiao()"
          >添加</el-button
        >
      </div>
      <div>
        <!-- 表格部分 -->
        <div class="y-table">
          <el-table
            :border="true"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            ref="multipleTable"
            :data="currList"
            tooltip-effect="dark"
            style="width: 100%, text-align: center "
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              align="center"
              type="index"
              width="100"
              :index="indexFn"
              label="序号"
            ></el-table-column>
            <el-table-column
              label="电子件名称"
              prop="material_name"
              hight="30px"
              align="center"
            ></el-table-column>
            <el-table-column
              label="电子件列表"
              prop="material_url"
              align="center"
              width="600px"
            ></el-table-column>
            <el-table-column property="do" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="del(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-dialog title="修改信息" :visible.sync="dialogForm" width="490px">
            <el-form :model="this.BJform" ref="updataForm">
              <el-row>
                <el-col>
                  <el-form-item
                    label="项目材料名称:"
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      v-model="BJform.material_name"
                      autocomplete="off"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col class="hiddle">
                  <el-form-item
                    label="项目材料类型:"
                    :label-width="formLabelWidth"
                    prop="material_type"
                  >
                    <el-input
                      v-model="BJform.material_type"
                      autocomplete="off"
                      :disabled="true"
                      placeholder="材料管理"
                      class="padding"
                      >材料管理</el-input
                    >
                      </el-form-item>
                </el-col>
              </el-row>
                  <el-row>
                <el-col :span="11">
                  <el-form-item
                    label="项目材料路径:"
                    :label-width="formLabelWidth"
                    prop="material_url"
                  >
                    <el-input
                      v-model="BJform.material_url"
                      autocomplete="off"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-upload
                    action="api/pic/load"
                    :headers="userToken"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :show-file-list="false"
                  >
                    <el-button type="text" class="clicksub" size="medium">
                      上传
                      <i class="el-icon-upload el-icon--right"></i>
                    </el-button>
                  </el-upload>
                </el-col>
              </el-row>
              <el-row class="hiddle">
                <el-col :span="11">
                  <el-form-item
                    label="项目信息ID:"
                    :label-width="formLabelWidth"
                    prop="buildinfo_id"
                  >
                    <el-input
                      v-model="BJform.buildinfo_id"
                      autocomplete="off"
                      :disabled="true"
                      class="padding"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="quaoxiao(BJform)">取 消</el-button>
              <el-button type="primary" @click="SureEdit('updataForm')"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
        <div class="f-block">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      finput: [
        {
          material_type: "0",
          label: "材料管理",
        },
        {
          material_type: "1",
          label: "项目节点图",
        },
        {
          material_type: "2",
          label: "项目亮点图",
        },
        {
          material_type: "3",
          label: "宣传片",
        },
        {
          material_type: "4",
          label: "平面图",
        },
        {
          material_type: "5",
          label: "项目效果图",
        },
      ],
      userToken: {}, //usertoken的值
      currList: [], //当前展示的数据数组
      shuju: {
        buildMaterials: "",
        buildinfo_addr: "",
        buildinfo_advance: "",
        buildinfo_area: "",
        buildinfo_code: "",
        buildinfo_company: "",
        buildinfo_contractor: "",
        buildinfo_cost: "",
        buildinfo_design: "",
        buildinfo_id: "",
        buildinfo_licence: "",
        buildinfo_money: "",
        buildinfo_name: "1",
        buildinfo_organ: "",
        buildinfo_planend: "",
        buildinfo_property: "",
        buildinfo_realend: "",
        buildinfo_shortname: "",
        buildinfo_start: "",
        buildinfo_status: "",
        buildinfo_supervisor: "",
      },
      // ====分页=====
      tableData: [], //总数居
      currPage: 1, //当前页
      pageSize: 5, //每页数据量
      currList: [], //当前展示的数据数组
      // 编辑对话框
      dialogFormVisible: false,
      // 添加对话框
      dialogForm: false,
      BJform: {
        material_name: "",
        material_type: "6",
        material_url: "",
        buildinfo_id: "1",
      },
      formInline: {
        buildMaterials: "",
        buildinfo_addr: "",
        buildinfo_advance: "",
        buildinfo_area: "",
        buildinfo_code: "",
        buildinfo_company: "",
        buildinfo_contractor: "",
        buildinfo_cost: "",
        buildinfo_design: "",
        buildinfo_id: "",
        buildinfo_licence: "",
        buildinfo_money: "",
        buildinfo_name: "1",
        buildinfo_organ: "",
        buildinfo_planend: "",
        buildinfo_property: "",
        buildinfo_realend: "",
        buildinfo_shortname: "",
        buildinfo_start: "",
        buildinfo_status: "",
        buildinfo_supervisor: "",
        buildinfo_id: "1",
      },
      formLabelWidth: "180px",
    };
  },
  methods: {
    // 修改模态框的确定
    // 编辑里的确定按钮
    BjQd(Form) {
      this.$refs[Form].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          http.updBuildInfo(this.formInline).then((r) => {
            console.log("这是编辑的", r);
            http.addxi({}).then((res) => {
              this.shuju = res.data;
              // this.tableData = res.data;
              // this.setCurrList(1);
              // 点确定后让表清空
              //  this.BJform=[]
            });
          });
        } else {
          this.$message({
            showClose: true,
            message: "修改失败",
            type: "error",
          });
          return false;
        }
      });
    },
    // 编辑里的取消按钮
    BjQx(formInline) {
      console.log(formInline);
      this.dialogFormVisible = false;
      // 点取消后清空
      for (let key in formInline) {
        formInline[key] = "";
      }
    },

    // 修改
    xiangmuEdit() {
      this.dialogFormVisible = true;
      this.formInline = this.shuju;
    },

    //添加
    addCaiLiao() {
      this.dialogForm = true;
    
    },
    // 添加里的提交按钮
    SureEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogForm = false;
          http.addBuildMaterial(this.BJform).then((r) => {
            console.log("这是新增的", r);
            http.getBuildMaterials({}).then((res) => {
              this.tableData = res.data;
              this.setCurrList(this.currPage);
              // 点确定后让表清空
              //  this.BJform=[]
            });
          });
          for (const key in this.BJform) {
             this.BJform[key]=''
          }
        } else {
          this.$message({
            showClose: true,
            message: "修改失败",
            type: "error",
          });
          return false;
        }
      });
    },
    // 编辑里的取消按钮
    quaoxiao(BJform) {
      console.log(BJform);
      this.dialogForm = false;
      // 点取消后清空
      for (let key in BJform) {
        BJform[key] = "";
      }
    },
    // 上传
    // 成功
    handleSuccess(res, file, fileList) {
      console.log("文件", res);
      this.BJform.material_url = res.name;
      this.$notify.success({
        title: "成功",
        message: `文件上传成功`,
      });
    },
    // 删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 删除  传给id
    del(index, row) {
      console.log("行", row);
      http.delBuildMaterial({ material_id: row.material_id }).then((r) => {
        console.log("获取", r.data);
        http.getBuildMaterials({}).then((r) => {
          this.tableData = r.data;
          // console.log(this.tableData);
          this.setCurrList(this.currPage);
        });
      });
    },
    // 表格序号
    indexFn(index) {
      index = index + 1 + (this.currPage - 1) * this.pageSize;
      return index;
    },
    // 分页
    setCurrList(index) {
      console.log("当前页", index);
      // console.log(this.currPage.length)
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);
      console.log(val);
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
      console.log(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log(val);
    },

    handleSelectionChange(val) {
      console.log(val);
      this.newData = val;
      console.log(this.newData);
    },
  },
  //获取数据
  mounted() {
    this.userToken.userToken = sessionStorage.getItem("userToken");
    http.addxi({}).then((r) => {
      console.log("获取", r.data);
      this.shuju = r.data;
    });
    // 表格;buildMaterial/getBuildMaterials
    http.getBuildMaterials({}).then((r) => {
      console.log(r);
      this.tableData = r.data;
      console.log(r.data);
      // console.log(this.tableData);
      this.setCurrList(1);
    });
  },
};
</script>
<style  scoped>
.hiddle{
  display: none;
}
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
.y-conter {
  width: 100%;
  height: 650px;
  margin-top: 15px;
  overflow-y: scroll;
  background: #fff;
}
.y-title {
  width: 100%;
  height: 60px;
  line-height: 60px;
  /* background: red; */
  border: 1px solid #eee;
  /* padding-top: 20px; */
}
.y-font-1 {
  font-size: 15px;
  font-weight: bold;
  padding-left: 15px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.el-col-4 {
  width: 16.66667%;
  margin-left: 84px;
}
.bg-purple-dark {
  background: #fff;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #fff;
}
.grid-content {
  border-radius: 4px;
  min-height: 230px;
}
.row-bg {
  background: #fff;
  height: 200px;
}
.y-nrong {
  width: 100%;
  margin: 0px auto;
  height: 267px;
  position: relative;
}

.y-btn {
  width: 95%;
  height: 70px;
}
.y-but {
  position: absolute;
  right: 0px;
  top: 10px;
}

.y-table-conter {
  width: 98%;
  margin: 0px auto;
  margin-top: 30px;
}
.y-bt {
  width: 100%;
  margin: 0px auto;
  height: 50px;
  font-size: 15px;
  font-weight: bold;
  position: relative;
}
/* 提交按钮 */
.tjia {
  position: absolute;
  right: 0px;
  top: 7px;
}
.el-row[data-v-71449c17] {
  margin: 0px !important;
}
.el-input >>> .el-input__inner {
  width: 150px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 150px !important;
  height: 30px;
}
.el-col[data-v-71449c17] {
  border-radius: 4px;
}
.y-form {
  width: 100%;
  margin-left: 15px;
}
.two1-zi {
  font-size: 15px;
  font-weight: 600;
  display: block;
}
.two1-zi1 {
  font-size: 15px;
  padding-left: 10px;
}
.grid-content .bg-purple {
  display: flex;
}
.p-all {
  display: flex;
}
.clicksub {
  margin-left: 130px;
}
/* 日期叉叉 */
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 155px;
}
</style>